<template>
  <van-popup
    class="exchangePopup"
    v-model:show="props.show"
    position="center"
    :z-index="999999"
    teleport="body"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
    @click-overlay="popupClose"
    @click-close-icon="popupClose"
  >
    <div class="box">
      <div class="box-header items-center">
        <img v-if="type == 1" class="box-icon" src="/image/success-icon.svg" />
        <img v-else class="box-icon" src="/image/failed-icon.svg" />
        <div class="title">
          {{ type == 1 ? $t("lotteryMoney.tjcg") : $t("lotteryMoney.tjsb") }}
        </div>
        <div class="desc">
          {{
            type == 1 ? $t("lotteryMoney.djcg") : $t("lotteryMoney.jhbxzhDh")
          }}
        </div>
      </div>
      <!-- footer -->
      <div class="footer items-center">
        <div
          class="footer-btn"
          style="margin-right: 5px"
          @click="jumpPage(props.type, true)"
        >
          {{ $t(type == 1 ? "mvp.other.zdl" : "lotteryMoney.ljjh") }}
        </div>
        <!-- <div class="footer-btn footer-btn-disabled" style="margin-left: 5px">
          {{ $t("lotteryMoney.qdj") }}
        </div> -->
      </div>
    </div>
  </van-popup>
</template>
<script setup lang="ts" name="exchangePopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";

import { isAndroid, toThousands } from "@/utils";
import { JUMPAPPS } from "~/config";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    type: number;
  }>(),
  {
    show: false,
    type: 1, // 1. 成功 2. 失败
  }
);
const firebase = useInitFirebase(); // 初始化firebase

const emit = defineEmits(["update:show", "refresh"]);

onMounted(() => {});

// 关闭弹窗
const popupClose = () => {
  emit("update:show", false);
};

// 点击-页面跳转
const jumpPage = async (val: any, isApp = false, params = null) => {
  if (isApp) {
    // 激活-避险账户
    if (val == 2) {
      firebase?.logEvent("BDC_H5_lottery_exchange_Click_HedgeAccount");
      const hedgeAccount = JUMPAPPS()["hedgeAccount"]();
      bridge.jumpAppRoute(hedgeAccount.routeKey, isAndroid.value, hedgeAccount);
    }
  } else if (val === "assetDetails") {
    // switchTabBar("mvp-assetDetails__");
  }
  popupClose();
};
</script>
<style lang="scss" scoped>
.exchangePopup {
  background-color: transparent !important;
  .box {
    margin: 0 30 * 2px;
    border-radius: 12 * 2px;
    position: relative;
    background: linear-gradient(180deg, #e2f0ff 0%, #fffeff 63.85%);
    overflow: hidden;
    &-header {
      padding: 20 * 2px;
      justify-content: center;
      flex-direction: column;
    }
    &-icon {
      width: 40 * 2px;
      height: 40 * 2px;
      margin-bottom: 15 * 2px;
    }
  }
  .title {
    margin-bottom: 12 * 2px;
    color: #141924;
    text-align: center;
    font-size: 14 * 2px;
    font-weight: 510;
  }
  .desc {
    text-align: center;
    font-size: 13 * 2px;
    color: #999da7;
  }

  .winning {
    padding: 0 16 * 2px;
    margin-bottom: 20 * 2px;
    &-top {
      position: relative;
      border-radius: 6 * 2px;
      background-color: #d5e9ff;
      padding: 20 * 2px 10 * 2px;
      justify-content: center;
      &-title {
        font-size: 14 * 2px;
        color: #141924;
        font-size: 22 * 2px;
        font-size: 700;
      }
      &-tag {
        position: absolute;
        top: 15px;
        right: 15px;
        color: #007bff;
        font-size: 12 * 2px;
      }
    }
    &-bottom {
      margin-top: 16 * 2px;
      justify-content: center;
      &-money {
        font-size: 22 * 2px;
        font-size: 700;
        color: #007bff;
      }
      &-BDC {
        font-size: 14 * 2px;
        font-size: 700;
        color: #141924;
      }
    }
  }

  .footer {
    width: 100%;
    justify-content: space-around;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding: 12 * 2px 15 * 2px;

    &-btn {
      border-radius: 6 * 2px;
      background-color: #007bff;
      color: #fff;
      text-align: center;
      font-size: 15 * 2px;
      font-weight: 590;
      width: 265 * 2px;
      height: 36 * 2px;
      line-height: 36 * 2px;
      &-disabled {
        background-color: #a0ceff;
      }
      &-cancel {
        background-color: #fff;
        color: #007bff;
        border: 3px solid #007bff;
        margin-left: 10 * 2px;
      }
    }
  }
}
</style>
